<template>
  <div width="60%">
    <div class="page-breadcrumb-wrap">
      <el-card class="page-breadcrumb">
        <span class="breadcrumb-button" @click="goBack">审批设置</span>
        <span class="breadcrumb-line">/</span>
        <span class="breadcrumb-active">{{ addEditStr }}审批设置</span>
      </el-card>
    </div>
    <div class="data-form-wrap">
      <el-card :style="{ height: cardHeight + 'px','overflow-y': 'scroll' }">
        <el-form
          ref="dataForm"
          label-position="top"
          class="dataForm"
          :model="forms"
          :rules="rules"
          label-width="160px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="项目" prop="lineName">
                <el-input v-model.trim="forms.lineName" disabled placeholder="请输入项目"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分部" prop="lotName">
                <el-input v-model.trim="forms.lotName" disabled placeholder="请输入分部"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工区" prop="workArea">
                <el-input v-model.trim="forms.workArea" disabled placeholder="请输入工区"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批名称" prop="projectName">
                <el-input v-model.trim="forms.projectName" placeholder="请输入审批名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权属单位" prop="ownershipUnit">
                <el-input v-model.trim="forms.ownershipUnit" placeholder="请输入权属单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="权属单位联系人" prop="linkName">
                <el-input v-model.trim="forms.linkName" placeholder="请输入权属单位联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="linkPhone">
                <el-input v-model.trim="forms.linkPhone" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业主代表" prop="ownerName">
                <el-input v-model.trim="forms.ownerName" placeholder="请输入业主代表"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工程实体名称" prop="engineeringName">
                <el-input v-model.trim="forms.engineeringName" placeholder="请输入工程实体名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建筑物名称" prop="buildingName">
                <el-input v-model.trim="forms.buildingName" placeholder="请输入建筑物名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建筑物类型" prop="buildingType">
                <el-select
                  v-model="forms.buildingType"
                  placeholder="请选择建筑物类型"
                  style="width: 100%"
                  clearable
                >
                  <el-option v-for="item in buildingTypeList" :key="item.itemValue" :label="item.itemLabel" :value="item.itemValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="穿越类型" prop="throughType">
                <el-select
                  v-model="forms.throughType"
                  placeholder="请选择穿越类型"
                  style="width: 100%"
                  clearable
                >
                  <el-option v-for="item in throughTypeList" :key="item.itemValue" :label="item.itemLabel" :value="item.itemValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在行政区" prop="region">
                <el-cascader separator="，" placeholder="请选择所在行政区" style="width:100%;" :options="pcaTextArr" v-model="forms.region">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="敏感区域类型" prop="areaType">
                <el-select
                  v-model="forms.areaType"
                  placeholder="请选择敏感区域类型"
                  style="width: 100%"
                  clearable
                >
                  <el-option v-for="item in sensitiveAreaTypeList" :key="item.itemValue" :label="item.itemLabel" :value="item.itemValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div class="flowBox">
            <span >审批流程</span>
            <el-button type="primary" size="mini" @click.native="associatedProcess()">关联</el-button>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="设计方案流程" name="1"></el-tab-pane>
            <el-tab-pane label="施工方案流程" name="2"></el-tab-pane>
          </el-tabs>
          <el-form v-if="selectWorkFlowObj.id && activeName === '1'">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="模型编码"> {{ selectWorkFlowObj.moduleCode }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模型名称"> {{ selectWorkFlowObj.moduleName }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生效版本"> {{ selectWorkFlowObj.version }} </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="流程描述"> {{ selectWorkFlowObj.remark }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form v-if="constructionObj.id && activeName === '2'">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="模型编码"> {{ constructionObj.moduleCode }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模型名称"> {{ constructionObj.moduleName }} </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生效版本"> {{ constructionObj.version }} </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="流程描述"> {{ constructionObj.remark }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span class="operation-footer">
          <el-button @click="goBack()">取 消</el-button>
          <el-button type="primary" @click="submitHandle">确 定</el-button>
        </span>
        <el-dialog title="关联流程" :visible.sync="dialogTableVisible">
          <el-table
            ref="multipleTable"
            :data="tableList"
            row-key="id"
            stripe
            max-height="500"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="moduleCode" label="模型编码" align="center" show-overflow-tooltip />
            <el-table-column prop="moduleName" label="模型名称" align="center" show-overflow-tooltip />
            <el-table-column prop="version" label="生效版本" align="center" show-overflow-tooltip />
            <el-table-column prop="remark" label="流程描述" align="center" show-overflow-tooltip />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getWorkFlowListData"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitWorkFlow">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { addOrUpd, getWorkFlowList, getOrgLineLotAndWorkArea, getModuleById } from '@/api/approvalSetting'
import { regionData, pcaTextArr } from 'element-china-area-data'

export default {
  name: 'Edit',
  props: {
    rowData: {
      type: Object,
      require: true,
      default: () => {}
    },
    orgId: {
      type: [Number, String],
      require: true,
      default: () => 0
    },
    addEditStr: {
      type: String,
      require: true,
      default: () => '新增'
    },
     throughTypeList: {
      type: Array,
      require: true,
      default: () => []
    },
    sensitiveAreaTypeList: {
      type: Array,
      require: true,
      default: () => []
    },
    buildingTypeList: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data () {
    return {
      pcaTextArr,
      regionData,
      dialogTableVisible: false,
      orgTreeData: [],
      cardHeight: document.body.offsetHeight - 135,
      workFlowListData: [],
      forms: {
        lineName: '',
        lotName: '',
        workArea: ''
      },
      rules: {
        projectName: [
          { required: true, message: '审批名称不能为空', trigger: 'blur' },
          { max: 20, message: '不能超过20个字符', trigger: 'blur' }
        ],
        ownershipUnit: [
          { required: true, message: '权属单位不能为空', trigger: 'blur' },
          { max: 20, message: '不能超过20个字符', trigger: 'blur' }
        ],
        linkName: [
          { required: true, message: '权属单位联系人不能为空', trigger: 'blur' },
          { max: 10, message: '不能超过10个字符', trigger: 'blur' }
        ],
        linkPhone: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' },
          { required: true, max: 11, message: '不能超过11个字符', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
            message: '请输入正确手机号码',
            trigger: 'blur'
          }
        ]
      },
      // 查询参数
      queryParams: {
        moduleCode: '',
        moduleName: '',
        pageNo: 1,
        pageSize: 10
      },
      tableList: [],
      total: 0,
      multipleSelection: [],
      selectWorkFlowObj: {},
      isConstruction: false,
      constructionObj: {},
      activeName: '1'
    }
  },
  mounted () {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
    this.initData()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection() // 清空所有选择
        this.$refs.multipleTable.toggleRowSelection(val.pop()) // 设置选择项
      }
    },
    submitWorkFlow () {
      if (this.multipleSelection <= 0) {
        return this.$message.error('关联的流程不能为空')
      }
      if (!this.isConstruction) {
        this.selectWorkFlowObj = this.multipleSelection[0]
        this.forms.moduleId = this.selectWorkFlowObj.id
        this.activeName = '1'
      } else {
        this.constructionObj = this.multipleSelection[0]
        this.forms.constructionModuleId = this.constructionObj.id
        this.activeName = '2'
      }

      this.dialogTableVisible = false
    },
    associatedProcess () {
      this.isConstruction = this.activeName === '2'
      this.total = 0
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.getWorkFlowListData()
      this.dialogTableVisible = true
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection()
      })
    },
    async getWorkFlowListData () {
      const res = await getWorkFlowList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    goBack () {
      this.$emit('isShowEditChange')
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.cardHeight = document.body.offsetHeight - 135
      })
    },
    async initData () {
      console.log(this.rowData, 'this.rowData')
      if (this.rowData) {
        this.forms = this.rowData
        this.forms.region = this.rowData.region && this.rowData.region.split(',') || ''
        if (this.rowData.moduleId) {
          const res = await getModuleById({ modelId: this.rowData.moduleId })
          this.selectWorkFlowObj.moduleCode = res.data.moduleCode
          this.selectWorkFlowObj.moduleName = res.data.moduleName
          this.selectWorkFlowObj.remark = res.data.remark
          this.selectWorkFlowObj.version = res.data.version
          this.selectWorkFlowObj.id = res.data.id
        }
        if (this.rowData.constructionModuleId) {
          const res = await getModuleById({ modelId: this.rowData.constructionModuleId })
          this.constructionObj.moduleCode = res.data.moduleCode
          this.constructionObj.moduleName = res.data.moduleName
          this.constructionObj.remark = res.data.remark
          this.constructionObj.version = res.data.version
          this.constructionObj.id = res.data.id
        }
        this.$forceUpdate()
      } else {
        const res = await getOrgLineLotAndWorkArea({ orgId: this.orgId })
        this.forms.lineName = res.data.lineName
        this.forms.lotName = res.data.lotName
        this.forms.workArea = res.data.workArea
        this.forms.workAreaId = this.orgId
      }
      console.log(this.forms, 'forms')
    },
    async submitHandle () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const query = JSON.parse(JSON.stringify(this.forms))
          delete query.lineName
          delete query.lotName
          delete query.workArea
          query.region = query.region && query.region.join(',') || ''
          const res = await addOrUpd(query)
          if (res.code === 'success') {
            this.$message.success('操作成功')
            this.$emit('getTableList')
            this.$emit('isShowEditChange')
          } else {
            this.$message.error(res.msg)
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #fff none;
  border-radius: 4px;
  height: 300px;
  overflow-y: auto;
}
.data-form-wrap {
  padding-top: 0;
}
.approvalProcess {
  font-weight: 600;
  margin-right: 10px;
}
.flowBox {
  margin-bottom: 10px;
  color: #101010;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
}
</style>
